<template>
	<div>
		<div v-if="pageData.items && pageData.items.length > 0">
			<ul class="dataUl">
				<li class="dataLi flex" style="justify-content: space-between;" v-for="item in pageData.items" :key="item.expertId">
					<div class="flex" style="justify-content: space-between;">
						<el-image class="liImage" :src="item.head" fit="cover"></el-image>
						<div>
							<p class="titleName flex">
								<span>{{ item.expertName }}</span>
								<img v-if="item.educational" src="@/assets/image/specialist/mz.png" alt="">
								<img v-if="item.rankName" src="@/assets/image/specialist/nr.png" alt="">
								<img v-if="item.fieldRelation" src="@/assets/image/specialist/sj.png" alt="">
							</p>
							<p class="msgList">教育背景：{{ item.educational?item.educational:'暂无' }}</p>
							<p class="msgList">职称/职务：{{ item.rankName?item.rankName:'暂无' }}</p>
							<p class="msgList">擅长领域：{{ item.fieldRelation?item.fieldRelation:'暂无' }}</p>
						</div>
					</div>
					<el-button type="primary" @click="lookDetails(item.expertId)">查看详情</el-button>
				</li>
			</ul>
			<div class="flex" style="justify-content: space-between;align-items: center;">
				<span style="margin-top: 20px;color: #333333;margin-left: 20px;">共 {{ pageData.totalNum }} 名 专家</span>
				<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
			</div>
		</div>
		<noData v-else></noData>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: '',
				tableData: [{}],
				queryData: {
					companyId:'',
					trainingClassId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				pageData: ''
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 21)
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.userId = store.userInfo.id
			
			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId
				this.getPageData()
		},
		watch: {
	
	
		},
		methods: {
			paginaClick(val){
				this.queryData.page = val
				this.getPageData()
			},
			lookDetails(id) {
				// 查看详情
				this.$router.push(`/entrance/teammanagement/specialistdetail/${id}`)
			},
			getPageData(){
				this.queryData.companyId = this.companyId
				this.queryData.trainingClassId = this.$route.params.id
				this.$request.postForm(this.$api.queryExpertList, this.queryData).then(res=>{
					if(res.code == 200){
						this.pageData = res.data
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.dataUl,
	.dataLi {
		width: 100%;
	}
	
	.dataLi {
		padding: 10px 20px;
		background: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;
		align-items: center;
	}
	
	.dataIsActive {
		background: #FAFAFA;
	}
	
	.liImage {
		width: 120px;
		height: 120px;
		margin-right: 30px;
	}
	
	.el-button--small {
		height: 36px;
		width: 110px;
	}
	
	.titleName {
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 20px;
		align-items: center;
	}
	
	.titleName span {
		margin-right: 35px;
	}
	
	.titleName img {
		margin-right: 10px;
		width: 16px;
		height: 16px;
	}
	
	.msgList {
		color: #454545;
		font-size: 12px;
		line-height: 22px;
		width: 550px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
